<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>企业认证 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      margin: 0;
      padding-bottom: 80px;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #1890ff;
      color: white;
    }
    
    /* 认证进度 */
    .verify-progress {
      background-color: #fff;
      padding: 20px 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .progress-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      text-align: center;
    }
    
    .progress-bar-container {
      position: relative;
      margin: 0 10px 10px;
    }
    
    .progress-steps {
      display: flex;
      justify-content: space-between;
      position: relative;
      z-index: 2;
    }
    
    .progress-step {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #f5f7fa;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      position: relative;
    }
    
    .progress-step.active {
      background-color: #1890ff;
      color: white;
    }
    
    .progress-step.completed {
      background-color: #52c41a;
      color: white;
    }
    
    .progress-step-label {
      position: absolute;
      top: 35px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      color: #666;
      white-space: nowrap;
    }
    
    .progress-line {
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      height: 2px;
      background-color: #eee;
      z-index: 1;
    }
    
    .progress-line-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background-color: #1890ff;
      transition: width 0.3s;
    }
    
    /* 通用认证页面样式 */
    .verify-page {
      display: none;
    }
    
    .verify-page.active {
      display: block;
    }
    
    /* 认证表单容器 */
    .verify-container {
      padding: 0 15px;
    }
    
    /* 认证卡片 */
    .verify-card {
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 15px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .card-header {
      padding: 15px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .card-title {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
    }
    
    .card-desc {
      font-size: 13px;
      color: #666;
      margin-top: 5px;
    }
    
    /* 表单样式 */
    .form-group {
      padding: 15px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .form-group:last-child {
      border-bottom: none;
    }
    
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
    
    .form-hint {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }
    
    .form-control {
      width: 100%;
      padding: 12px 15px;
      border-radius: 6px;
      border: 1px solid #ddd;
      font-size: 15px;
      box-sizing: border-box;
    }
    
    .form-control:focus {
      outline: none;
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
    
    /* 文件上传区域 */
    .upload-area {
      border: 1px dashed #ddd;
      border-radius: 6px;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.3s;
    }
    
    .upload-area:hover {
      border-color: #1890ff;
    }
    
    .upload-icon {
      font-size: 24px;
      color: #1890ff;
      margin-bottom: 10px;
    }
    
    .upload-text {
      font-size: 14px;
      color: #666;
    }
    
    .upload-hint {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }
    
    .uploaded-files {
      margin-top: 15px;
    }
    
    .uploaded-file {
      display: flex;
      align-items: center;
      padding: 8px 10px;
      background-color: #f5f7fa;
      border-radius: 4px;
      margin-bottom: 8px;
    }
    
    .file-icon {
      color: #1890ff;
      margin-right: 10px;
    }
    
    .file-name {
      flex: 1;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .remove-file {
      color: #ff4d4f;
      cursor: pointer;
    }
    
    /* 选项组 */
    .options-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 5px;
    }
    
    .option-item {
      padding: 8px 15px;
      border-radius: 6px;
      border: 1px solid #ddd;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
    }
    
    .option-item.selected {
      border-color: #1890ff;
      background-color: #e6f7ff;
      color: #1890ff;
    }
    
    /* 底部操作栏 */
    .action-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      border-top: 1px solid #eee;
      padding: 15px;
      display: flex;
      gap: 15px;
      z-index: 90;
    }
    
    .action-btn {
      padding: 12px 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      flex: 1;
      text-align: center;
      border: none;
    }
    
    .btn-normal {
      background-color: #f5f7fa;
      color: #666;
    }
    
    .btn-primary {
      background-color: #1890ff;
      color: white;
    }
    
    /* 认证说明 */
    .verify-guide {
      background-color: #e6f7ff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
    }
    
    .guide-title {
      font-size: 15px;
      font-weight: 600;
      color: #1890ff;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }
    
    .guide-title i {
      margin-right: 8px;
    }
    
    .guide-list {
      padding-left: 22px;
      margin: 0;
    }
    
    .guide-list li {
      font-size: 13px;
      color: #333;
      margin-bottom: 8px;
      line-height: 1.5;
    }
    
    /* 样式1 - 标准表单布局 */
    .standard-form .verify-card {
      margin-bottom: 15px;
    }
    
    /* 样式2 - 步骤导航布局 */
    .step-form .verify-card {
      margin-bottom: 0;
      border-radius: 0;
      box-shadow: none;
      border-bottom: 1px solid #eee;
    }
    
    .step-form .card-header {
      background-color: #f5f7fa;
      padding: 12px 15px;
    }
    
    .step-form .step-content {
      display: none;
      padding: 15px;
    }
    
    .step-form .step-content.active {
      display: block;
    }
    
    .step-form .step-nav {
      display: flex;
      padding: 10px 15px;
      background-color: #fff;
      border-top: 1px solid #eee;
    }
    
    .step-form .step-btn {
      flex: 1;
      padding: 8px 0;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      text-align: center;
      border: none;
    }
    
    /* 样式3 - 卡片分步布局 */
    .card-form .verify-step {
      display: none;
    }
    
    .card-form .verify-step.active {
      display: block;
    }
    
    .card-form .verify-card {
      margin-bottom: 20px;
      overflow: hidden;
    }
    
    .card-form .step-actions {
      display: flex;
      gap: 10px;
      padding: 15px;
    }
    
    .card-form .step-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      text-align: center;
      border: none;
    }
    
    /* 样式4 - 简洁表单布局 */
    .simple-form .verify-container {
      padding: 15px;
    }
    
    .simple-form .form-group {
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .simple-form .verify-card {
      box-shadow: none;
      background-color: transparent;
      margin-bottom: 0;
    }
    
    .simple-form .card-header {
      padding: 0 0 15px;
      border-bottom: none;
    }
    
    .simple-form .verify-guide {
      background-color: transparent;
      padding: 15px 0;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
    
    /* 成功页面 */
    .success-page {
      text-align: center;
      padding: 40px 15px;
    }
    
    .success-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #f6ffed;
      color: #52c41a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      margin: 0 auto 20px;
    }
    
    .success-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .success-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 30px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">企业认证</h1>
    <a href="#" class="nav-btn" id="helpBtn">
      <i class="fa fa-question"></i>
    </a>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="standard">标准表单</div>
      <div class="style-tab" data-style="step">步骤导航</div>
      <div class="style-tab" data-style="card">卡片分步</div>
      <div class="style-tab" data-style="simple">简洁表单</div>
    </div>
  </div>
  
  <!-- 认证进度 -->
  <div class="verify-progress">
    <div class="progress-title">认证进度</div>
    <div class="progress-bar-container">
      <div class="progress-steps">
        <div class="progress-step active">
          1
          <div class="progress-step-label">基本信息</div>
        </div>
        <div class="progress-step">
          2
          <div class="progress-step-label">资质证明</div>
        </div>
        <div class="progress-step">
          3
          <div class="progress-step-label">审核确认</div>
        </div>
      </div>
      <div class="progress-line">
        <div class="progress-line-fill" style="width: 33%;"></div>
      </div>
    </div>
  </div>
  
  <!-- 样式1 - 标准表单布局 -->
  <div class="verify-page active standard-form" id="standard">
    <div class="verify-container">
      <div class="verify-guide">
        <div class="guide-title">
          <i class="fa fa-info-circle"></i> 认证说明
        </div>
        <ul class="guide-list">
          <li>企业认证后可获得更多平台功能权限</li>
          <li>请确保提供的信息真实有效，虚假信息将被拒绝</li>
          <li>审核周期一般为1-3个工作日</li>
        </ul>
      </div>
      
      <div class="verify-card">
        <div class="card-header">
          <h3 class="card-title">企业基本信息</h3>
          <div class="card-desc">请填写企业真实信息，将用于认证审核</div>
        </div>
        
        <div class="form-group">
          <label class="form-label">企业名称</label>
          <input type="text" class="form-control" placeholder="请输入企业全称">
          <div class="form-hint">需与营业执照上的名称一致</div>
        </div>
        
        <div class="form-group">
          <label class="form-label">统一社会信用代码</label>
          <input type="text" class="form-control" placeholder="请输入18位统一社会信用代码">
          <div class="form-hint">营业执照上的统一社会信用代码</div>
        </div>
        
        <div class="form-group">
          <label class="form-label">企业类型</label>
          <div class="options-group">
            <div class="option-item">有限责任公司</div>
            <div class="option-item">股份有限公司</div>
            <div class="option-item">个体工商户</div>
            <div class="option-item">个人独资企业</div>
            <div class="option-item">合伙企业</div>
            <div class="option-item">其他</div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">企业地址</label>
          <input type="text" class="form-control" placeholder="请输入企业注册地址">
          <div class="form-hint">需与营业执照上的地址一致</div>
        </div>
      </div>
      
      <div class="verify-card">
        <div class="card-header">
          <h3 class="card-title">联系人信息</h3>
          <div class="card-desc">请填写企业负责人或联系人信息</div>
        </div>
        
        <div class="form-group">
          <label class="form-label">联系人姓名</label>
          <input type="text" class="form-control" placeholder="请输入联系人姓名">
        </div>
        
        <div class="form-group">
          <label class="form-label">联系电话</label>
          <input type="tel" class="form-control" placeholder="请输入联系人手机号码">
        </div>
        
        <div class="form-group">
          <label class="form-label">电子邮箱</label>
          <input type="email" class="form-control" placeholder="请输入联系人邮箱">
        </div>
      </div>
      
      <div class="verify-card">
        <div class="card-header">
          <h3 class="card-title">资质证明上传</h3>
          <div class="card-desc">请上传清晰的资质证明图片，支持JPG、PNG格式</div>
        </div>
        
        <div class="form-group">
          <label class="form-label">营业执照</label>
          <div class="upload-area" id="uploadLicense">
            <div class="upload-icon">
              <i class="fa fa-cloud-upload"></i>
            </div>
            <div class="upload-text">点击上传营业执照照片</div>
            <div class="upload-hint">需清晰展示执照上的所有信息，支持JPG、PNG格式，大小不超过5MB</div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">法人身份证</label>
          <div class="upload-area" id="uploadIdCard">
            <div class="upload-icon">
              <i class="fa fa-cloud-upload"></i>
            </div>
            <div class="upload-text">点击上传法人身份证正反面照片</div>
            <div class="upload-hint">需上传身份证正反面照片，支持JPG、PNG格式，大小不超过5MB</div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">其他证明材料（可选）</label>
          <div class="upload-area" id="uploadOther">
            <div class="upload-icon">
              <i class="fa fa-cloud-upload"></i>
            </div>
            <div class="upload-text">点击上传其他证明材料</div>
            <div class="upload-hint">如行业资质证书等，支持JPG、PNG格式，大小不超过5MB</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 步骤导航布局 -->
  <div class="verify-page step-form" id="step">
    <div class="verify-container">
      <div class="verify-card">
        <div class="card-header">
          <h3 class="card-title">企业基本信息</h3>
        </div>
        <div class="step-content active">
          <div class="form-group">
            <label class="form-label">企业名称</label>
            <input type="text" class="form-control" placeholder="请输入企业全称">
            <div class="form-hint">需与营业执照上的名称一致</div>
          </div>
          
          <div class="form-group">
            <label class="form-label">统一社会信用代码</label>
            <input type="text" class="form-control" placeholder="请输入18位统一社会信用代码">
          </div>
          
          <div class="form-group">
            <label class="form-label">企业类型</label>
            <div class="options-group">
              <div class="option-item">有限责任公司</div>
              <div class="option-item">股份有限公司</div>
              <div class="option-item">个体工商户</div>
              <div class="option-item">其他</div>
            </div>
          </div>
        </div>
        <div class="step-nav">
          <button class="step-btn btn-normal" onclick="showToast('已取消')">取消</button>
          <button class="step-btn btn-primary" onclick="showToast('已保存第一步，进入第二步')">下一步</button>
        </div>
      </div>
      
      <div class="verify-card">
        <div class="card-header">
          <h3 class="card-title">联系方式与地址</h3>
        </div>
        <div class="step-content">
          <div class="form-group">
            <label class="form-label">企业地址</label>
            <input type="text" class="form-control" placeholder="请输入企业注册地址">
            <div class="form-hint">需与营业执照上的地址一致</div>
          </div>
          
          <div class="form-group">
            <label class="form-label">联系人姓名</label>
            <input type="text" class="form-control" placeholder="请输入联系人姓名">
          </div>
          
          <div class="form-group">
            <label class="form-label">联系电话</label>
            <input type="tel" class="form-control" placeholder="请输入联系人手机号码">
          </div>
        </div>
        <div class="step-nav">
          <button class="step-btn btn-normal" onclick="showToast('返回上一步')">上一步</button>
          <button class="step-btn btn-primary" onclick="showToast('已保存第二步，进入第三步')">下一步</button>
        </div>
      </div>
      
      <div class="verify-card">
        <div class="card-header">
          <h3 class="card-title">资质证明上传</h3>
        </div>
        <div class="step-content">
          <div class="form-group">
            <label class="form-label">营业执照</label>
            <div class="upload-area" id="uploadLicense2">
              <div class="upload-icon">
                <i class="fa fa-cloud-upload"></i>
              </div>
              <div class="upload-text">点击上传营业执照照片</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">法人身份证</label>
            <div class="upload-area" id="uploadIdCard2">
              <div class="upload-icon">
                <i class="fa fa-cloud-upload"></i>
              </div>
              <div class="upload-text">点击上传法人身份证正反面照片</div>
            </div>
          </div>
        </div>
        <div class="step-nav">
          <button class="step-btn btn-normal" onclick="showToast('返回上一步')">上一步</button>
          <button class="step-btn btn-primary" onclick="showToast('已提交认证申请，等待审核')">提交认证</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式3 - 卡片分步布局 -->
  <div class="verify-page card-form" id="card">
    <div class="verify-container">
      <!-- 步骤1 -->
      <div class="verify-step active">
        <div class="verify-guide">
          <div class="guide-title">
            <i class="fa fa-info-circle"></i> 第一步：填写企业基本信息
          </div>
          <ul class="guide-list">
            <li>请填写与营业执照一致的企业信息</li>
            <li>所有带 * 的为必填项</li>
          </ul>
        </div>
        
        <div class="verify-card">
          <div class="form-group">
            <label class="form-label">企业名称 *</label>
            <input type="text" class="form-control" placeholder="请输入企业全称">
          </div>
          
          <div class="form-group">
            <label class="form-label">统一社会信用代码 *</label>
            <input type="text" class="form-control" placeholder="请输入18位统一社会信用代码">
          </div>
          
          <div class="form-group">
            <label class="form-label">企业类型 *</label>
            <div class="options-group">
              <div class="option-item">有限责任公司</div>
              <div class="option-item">股份有限公司</div>
              <div class="option-item">个体工商户</div>
              <div class="option-item">其他</div>
            </div>
          </div>
        </div>
        
        <div class="step-actions">
          <button class="step-btn btn-normal" onclick="showToast('已取消')">取消</button>
          <button class="step-btn btn-primary" onclick="showToast('已保存第一步')">下一步</button>
        </div>
      </div>
      
      <!-- 步骤2 -->
      <div class="verify-step">
        <div class="verify-guide">
          <div class="guide-title">
            <i class="fa fa-info-circle"></i> 第二步：上传资质证明
          </div>
          <ul class="guide-list">
            <li>请上传清晰的证件照片，确保信息可辨认</li>
            <li>支持JPG、PNG格式，文件大小不超过5MB</li>
          </ul>
        </div>
        
        <div class="verify-card">
          <div class="form-group">
            <label class="form-label">营业执照 *</label>
            <div class="upload-area" id="uploadLicense3">
              <div class="upload-icon">
                <i class="fa fa-cloud-upload"></i>
              </div>
              <div class="upload-text">点击上传营业执照照片</div>
              <div class="upload-hint">需清晰展示执照上的所有信息</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">法人身份证 *</label>
            <div class="upload-area" id="uploadIdCard3">
              <div class="upload-icon">
                <i class="fa fa-cloud-upload"></i>
              </div>
              <div class="upload-text">点击上传法人身份证正反面照片</div>
            </div>
          </div>
        </div>
        
        <div class="step-actions">
          <button class="step-btn btn-normal" onclick="showToast('返回上一步')">上一步</button>
          <button class="step-btn btn-primary" onclick="showToast('已保存第二步')">下一步</button>
        </div>
      </div>
      
      <!-- 步骤3 -->
      <div class="verify-step">
        <div class="verify-guide">
          <div class="guide-title">
            <i class="fa fa-info-circle"></i> 第三步：确认并提交
          </div>
          <ul class="guide-list">
            <li>请确认所提供的信息真实有效</li>
            <li>审核通过后将通过短信通知您</li>
          </ul>
        </div>
        
        <div class="verify-card">
          <div class="form-group">
            <label class="form-label">联系人姓名 *</label>
            <input type="text" class="form-control" placeholder="请输入联系人姓名">
          </div>
          
          <div class="form-group">
            <label class="form-label">联系电话 *</label>
            <input type="tel" class="form-control" placeholder="请输入联系人手机号码">
          </div>
          
          <div class="form-group">
            <label class="form-label">电子邮箱</label>
            <input type="email" class="form-control" placeholder="请输入联系人邮箱">
          </div>
        </div>
        
        <div class="step-actions">
          <button class="step-btn btn-normal" onclick="showToast('返回上一步')">上一步</button>
          <button class="step-btn btn-primary" onclick="showToast('认证申请已提交，审核周期1-3个工作日')">提交认证</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式4 - 简洁表单布局 -->
  <div class="verify-page simple-form" id="simple">
    <div class="verify-container">
      <div class="verify-card">
        <div class="card-header">
          <h3 class="card-title">企业认证申请</h3>
          <div class="card-desc">完成认证可解锁更多企业服务功能</div>
        </div>
        
        <div class="form-group">
          <label class="form-label">企业名称</label>
          <input type="text" class="form-control" placeholder="请输入企业全称">
        </div>
        
        <div class="form-group">
          <label class="form-label">统一社会信用代码</label>
          <input type="text" class="form-control" placeholder="请输入18位统一社会信用代码">
        </div>
        
        <div class="form-group">
          <label class="form-label">企业类型</label>
          <div class="options-group">
            <div class="option-item">有限责任公司</div>
            <div class="option-item">股份有限公司</div>
            <div class="option-item">个体工商户</div>
            <div class="option-item">其他</div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">企业地址</label>
          <input type="text" class="form-control" placeholder="请输入企业注册地址">
        </div>
        
        <div class="form-group">
          <label class="form-label">联系人姓名</label>
          <input type="text" class="form-control" placeholder="请输入联系人姓名">
        </div>
        
        <div class="form-group">
          <label class="form-label">联系电话</label>
          <input type="tel" class="form-control" placeholder="请输入联系人手机号码">
        </div>
        
        <div class="verify-guide">
          <div class="guide-title">
            <i class="fa fa-file-text-o"></i> 上传证明材料
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">营业执照</label>
          <div class="upload-area" id="uploadLicense4">
            <div class="upload-icon">
              <i class="fa fa-cloud-upload"></i>
            </div>
            <div class="upload-text">点击上传营业执照照片</div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">法人身份证</label>
          <div class="upload-area" id="uploadIdCard4">
            <div class="upload-icon">
              <i class="fa fa-cloud-upload"></i>
            </div>
            <div class="upload-text">点击上传法人身份证正反面照片</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部操作栏 -->
  <div class="action-bar">
    <button class="action-btn btn-normal" onclick="showToast('已取消认证')">取消</button>
    <button class="action-btn btn-primary" onclick="showToast('认证申请已提交，等待审核')">提交认证</button>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const verifyPages = document.querySelectorAll('.verify-page');
    const backBtn = document.getElementById('backBtn');
    const helpBtn = document.getElementById('helpBtn');
    const toast = document.getElementById('toast');
    const optionItems = document.querySelectorAll('.option-item');
    const uploadAreas = document.querySelectorAll('.upload-area');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        verifyPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}样式`);
      });
    });
    
    // 返回按钮
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
    });
    
    // 帮助按钮
    helpBtn.addEventListener('click', function() {
      showToast('查看认证帮助指南');
    });
    
    // 选项选择
    optionItems.forEach(item => {
      item.addEventListener('click', function() {
        // 获取同组的其他选项并移除选中状态
        const siblings = this.parentElement.querySelectorAll('.option-item');
        siblings.forEach(sib => sib.classList.remove('selected'));
        
        // 设置当前选项为选中状态
        this.classList.add('selected');
        
        showToast(`已选择：${this.textContent}`);
      });
    });
    
    // 文件上传区域点击事件
    uploadAreas.forEach(area => {
      area.addEventListener('click', function() {
        const label = this.previousElementSibling.textContent;
        showToast(`已打开${label}上传对话框`);
        
        // 模拟上传成功
        setTimeout(() => {
          // 检查是否已有上传文件列表
          let filesContainer = this.nextElementSibling;
          if (!filesContainer || !filesContainer.classList.contains('uploaded-files')) {
            filesContainer = document.createElement('div');
            filesContainer.className = 'uploaded-files';
            this.parentNode.insertBefore(filesContainer, this.nextSibling);
          }
          
          // 添加上传文件项
          const fileName = `${label.replace('：', '')}_${Date.now().toString().slice(-4)}.jpg`;
          const fileItem = document.createElement('div');
          fileItem.className = 'uploaded-file';
          fileItem.innerHTML = `
            <div class="file-icon"><i class="fa fa-file-image-o"></i></div>
            <div class="file-name">${fileName}</div>
            <div class="remove-file" onclick="removeFile(this)"><i class="fa fa-times"></i></div>
          `;
          filesContainer.appendChild(fileItem);
          
          showToast(`${label}上传成功`);
        }, 1000);
      });
    });
    
    // 移除已上传文件
    function removeFile(element) {
      const fileItem = element.closest('.uploaded-file');
      const fileName = fileItem.querySelector('.file-name').textContent;
      fileItem.remove();
      showToast(`已移除 ${fileName}`);
    }
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          toast.style.display = 'none';
          toast.style.opacity = '1';
        }, 300);
      }, 2000);
    }
  </script>
</body>
</html>
